<template>
	<el-dialog title="服务选择" :visible.sync="dialogVisible" width="900px" @close="handleClose"
		:close-on-click-modal="false" append-to-body="true" :show-close="true">
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>服务选择</span>
		</div>
		
		
		<div class=" smp_panel_1">
			<div class="smp_panel_header" >
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">查询条件</div>
			</div>
			
			<!-- <div class="detailsTitle">交易信息</div> -->
			<div class=" smp_panel_body">
			<el-form :inline="false" label-width="80px" size="mini" ref="form" :model="form">

				<el-row>
					<el-col :span="24">
						<el-col :span="10">
							<el-form-item label="交易码:" >
								<el-input v-model="query.body.transCode" placeholder="交易码"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="10">
							<el-form-item label="交易名称:" >
								<el-input v-model="query.body.transName" placeholder="交易名称"></el-input>
							</el-form-item>
						</el-col>
						
						
						
						<!-- <el-col :span="9">
							<el-form-item label="系统编号:">
								<el-input v-model="query.body.systemNo"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="9">
							<el-form-item label="系统名称:">
								<el-input v-model="query.body.systemName"></el-input>
							</el-form-item>
						</el-col>
 -->

						<el-col :span="4">
							<el-form-item style="text-align: right;" label-width="0">
								<el-button size="mini"   type="primary" plain @click="onSubmit">查询</el-button>
								<el-button size="mini"  plain @click="reset">清空</el-button>
							</el-form-item>
						</el-col>
					</el-col>
				</el-row>
			</el-form>
		</div>
		</div>

		<div class=" smp_panel_1">
			<div class="smp_panel_header" >
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">服务列表</div>
			</div>
			
			<!-- <div class="detailsTitle">交易信息</div> -->
			<div class=" smp_panel_body">
			<el-table :data="list" size="mini" stripe border style="width: 100%">
		        <el-table-column prop="transName" label="交易名称"  align="center" />
				<el-table-column prop="transCode" label="交易码" width="100" align="center" />
				<el-table-column prop="busCode" label="R值" width="200" align="center" />
				<el-table-column prop="systemNo" label="服务系统" width="200" align="center" >
					<template slot-scope="scope">
					{{scope.row.systemNo|getSystemName}}({{scope.row.systemNo}})
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-link
							size="mini"
							type="primary"
							:underline="false"
							style="font-size: 12px;"
							@click="handleChange(scope.$index, scope.row)">选择</el-link>
					</template>
				</el-table-column>

			</el-table>
			</div>
			<div class="smp-pagination" v-show="total>0">
				<el-pagination background size="mini" layout="total,sizes,prev, pager, next,jumper" :page-size="query.pageSize"
					:page-sizes="[5,10,15]" :total="total" :current-page="query.pageNum" @current-change="currentChange"
					@size-change="sizeChange">
				</el-pagination>
			
			</div>
		</div>
		
	</el-dialog>
</template>

<script>
	"use strict";
	import {getServiceByPage} from '@/api/service.js';
	export default {

		components: {
		},
		data() {
			return {

				total: 0,

				list: [],

				query: {
					body:{
						transCode:'',
						transName:'',
						developer:'',
						status:'',
						proposer:'',
						applyDateBegin:'',
						applyDateEnd:'',
						busCode:'',
						systemNo:'',
					},
					pageNum: 1,
					pageSize: 5
				},
				dialogVisible:false,
			};



		},

		created() {
			this.getList();
		},

		methods: {


			onSubmit() {
				this.query.pageNum = 1;
				this.getList();
			},


			reset(form) {
				this.query.body = {}
			},

			getList() {
				getServiceByPage(this.query).then(response => {
					this.list = response.data.extend.list
					this.total = response.data.extend.total;
					
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			
			currentChange(val){
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val){
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			},
			
			
			showDialog(row) {
				this.dialogVisible = true;
				this.query.body.systemNo=row
				this.getList();
			},
			
			handleChange(index,row){
				this.dialogVisible = false;
				this.$emit("addServerView",row);
			},
			
			handleClose(){
				this.$emit("resetServer");
			}

		},


	}
</script>

<style>
</style>
